<template>
  <div class="container">
    <!-- 上一页箭头 -->
    <a class="pre" @click="pre" :style="{ pointerEvents: pointerEvents ? 'none' : '' }"></a>
    <div class="roll">
      <!-- 四个ul来做无缝衔接 -->
      <!-- 第一个 -->
      <ul v-show="isNext" :style="{ left: nextLeft[0] + 'px', transition: transition + 's' }">
        <li v-for="item in albums1" :key="item.id">
          <div class="box">
            <a href="#" :title="item.name" class="box-pic">
              <!-- 封面 -->
              <img :src="item.blurPicUrl" alt="" />
              <!-- 后面的黑色碟子 -->
              <i class="bgImg"></i>
              <!-- 播放小图标 -->
              <a href="#" class="play"></a>
            </a>
          </div>
          <p>
            <a href="#" :title="item.name" class="text">{{ item.name }} </a>
          </p>
          <p>
            <a href="#" :title="item.artist.name" class="text">{{ item.artist.name }}</a>
          </p>
        </li>
      </ul>
      <!-- 第二个 -->
      <ul v-show="isNext" :style="{ left: nextLeft[1] + 'px', transition: transition + 's' }">
        <li v-for="item in albums1" :key="item.id">
          <div class="box">
            <a href="#" :title="item.name" class="box-pic">
              <!-- 封面 -->
              <img :src="item.blurPicUrl" alt="" />
              <!-- 后面的黑色碟子 -->
              <i class="bgImg"></i>
              <!-- 播放小图标 -->
              <a href="#" class="play"></a>
            </a>
          </div>
          <p>
            <a href="#" :title="item.name" class="text">{{ item.name }} </a>
          </p>
          <p>
            <a href="#" :title="item.artist.name" class="text">{{ item.artist.name }}</a>
          </p>
        </li>
      </ul>
      <!-- 第三个 -->
      <ul v-show="!isNext" :style="{ left: preLeft[0] + 'px', transition: transition + 's' }">
        <li v-for="item in albums1" :key="item.id">
          <div class="box">
            <a href="#" :title="item.name" class="box-pic">
              <!-- 封面 -->
              <img :src="item.blurPicUrl" alt="" />
              <!-- 后面的黑色碟子 -->
              <i class="bgImg"></i>
              <!-- 播放小图标 -->
              <a href="#" class="play"></a>
            </a>
          </div>
          <p>
            <a href="#" :title="item.name" class="text">{{ item.name }} </a>
          </p>
          <p>
            <a href="#" :title="item.artist.name" class="text">{{ item.artist.name }}</a>
          </p>
        </li>
      </ul>
      <!-- 第四个 -->
      <ul v-show="!isNext" :style="{ left: preLeft[1] + 'px', transition: transition + 's' }">
        <li v-for="item in albums1" :key="item.id">
          <div class="box">
            <a href="#" :title="item.name" class="box-pic">
              <!-- 封面 -->
              <img :src="item.blurPicUrl" alt="" />
              <!-- 后面的黑色碟子 -->
              <i class="bgImg"></i>
              <!-- 播放小图标 -->
              <a href="#" class="play"></a>
            </a>
          </div>
          <p>
            <a href="#" :title="item.name" class="text">{{ item.name }} </a>
          </p>
          <p>
            <a href="#" :title="item.artist.name" class="text">{{ item.artist.name }}</a>
          </p>
        </li>
      </ul>
    </div>
    <!-- 下一页箭头 -->
    <a href="javascript:;" class="next" @click="next" :style="{ pointerEvents: pointerEvents ? 'none' : '' }"></a>
  </div>
</template>

<script>
export default {
  name: 'NewDiscSlide',
  data() {
    return {
      //获取的数据放在albums数组里面
      albums: [],
      albums1: [],
      albums2: [],
      nextLeft: [0, 675],
      preLeft: [0, -675],
      //动画效果默认为1
      transition: 1,
      // 是否隐藏默认为1
      isNext: true,
      pointerEvents: false
    }
  },
  created() {
    // 获取数据
    this.getAlbums()
  },
  methods: {
    // 获取数据方法
    async getAlbums() {
      const { data: res } = await this.$http.get('/album/new?area=ALL&limit=10')
      this.albums = res.albums
      this.albums1 = this.albums.splice(0, 5)
      this.albums2 = this.albums.splice(5, 10)
      console.log(this.albums)
    },
    // 无缝衔接下一页
    next() {
      this.isNext = true
      this.pointerEvents = true
      this.moveLeft()
      this.moveRight()
    },
    pre() {
      this.isNext = false
      this.pointerEvents = true
      this.moveLeft()
      this.moveRight()
    },
    moveLeft() {
      this.transition = 1
      //异步，为了先显示
      setTimeout(() => {
        // 数组是不会发生动画，所以要用$set
        this.$set(this.nextLeft, 0, this.nextLeft[0] - 675)
        this.$set(this.nextLeft, 1, this.nextLeft[1] - 675)
      })

      setTimeout(() => {
        this.transition = 0
        if (this.nextLeft[0] === -675) {
          this.$set(this.nextLeft, 0, 675)
        }
        if (this.nextLeft[1] === -675) {
          this.$set(this.nextLeft, 1, 675)
        }
        this.pointerEvents = false
      }, 1000)
    },
    moveRight() {
      this.transition = 1
      //异步，为了先显示
      setTimeout(() => {
        // 数组是不会发生动画，所以要用$set
        this.$set(this.preLeft, 0, this.preLeft[0] + 675)
        this.$set(this.preLeft, 1, this.preLeft[1] + 675)
      })

      setTimeout(() => {
        this.transition = 0
        if (this.preLeft[0] === 675) {
          this.$set(this.preLeft, 0, -675)
        }
        if (this.preLeft[1] === 675) {
          this.$set(this.preLeft, 1, -675)
        }
        this.pointerEvents = false
      }, 1000)
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  height: 186px;
  margin: 20px 0 37px;
  border: 1px solid #d3d3d3;
  background-color: #f5f5f5;
  overflow: hidden;
}
.pre {
  position: absolute;
  top: 71px;
  width: 17px;
  height: 17px;
  background: url(https://s2.music.126.net/style/web2/img/index/index.png?5e09722e9fbdde4e9174d3dbaf6141bd) no-repeat -260px -75px;
  cursor: pointer;
  z-index: 9999px;
}
.next {
  position: absolute;
  right: 5px;
  top: 71px;
  width: 17px;
  height: 17px;
  background: url(https://s2.music.126.net/style/web2/img/index/index.png?5e09722e9fbdde4e9174d3dbaf6141bd) no-repeat -300px -75px;
}
.roll {
  position: relative;
  width: 645px;
  height: 180px;
  margin: 0 auto;
}
ul {
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 0;
  width: 100%;
  height: 100%;
  margin-top: 28px;
}
ul li {
  width: 118px;
  height: 150px;
  /* 阴影 */
  background: url(https://s2.music.126.net/style/web2/img/index/index.png?5e09722e9fbdde4e9174d3dbaf6141bd) no-repeat -260px 100px;
}
ul ul li p {
  width: inherit;
}
.box {
  position: relative;
  display: block;
  margin-bottom: 7px;
  width: 100px;
  height: 100px;
}
.box-pic {
  width: 118px;
  height: 100px;
}
.box img {
  display: block;
  height: 100%;
  width: 100%;
}
/* 后面的黑色碟子 */
.bgImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 118px;
  height: 100px;
  background: url(https://s2.music.126.net/style/web2/img/coverall.png?5d128bd48f5bc3d2e6c8ed12823bd57c) 0 -570px;
}
/* 小播放按钮 */
.play {
  display: block;
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 22px;
  height: 22px;
  background: url(https://s2.music.126.net/style/web2/img/iconall.png?38f6502aa694201b6b29360e06f038d8) no-repeat 0 -85px;
}
/* 文字隐藏等 */
.text {
  display: block;
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
</style>
